<template>

  <Layout>

    <div class="index-tab-line">
      <div class="index-tab-line2">
        <div class="index-tab-linein">

        </div>


      </div>
    </div>

    <div class="bottom-line">

    </div>
    <div class="main-content">
      <div class="main-content-school1">
        <h1>华迪家校通</h1>
        <P>让我们观看一个视频，了解为什么您应该使用我们的 Hwadee-FSC 产品。</P>
        <div class="video-class">
          <video controls autoplay loop width="1280" height="720">
            <source src="../assets/video/vi.mp4" type="video/mp4">

          </video>
        </div>

      </div>
      <div class="main-content-schoolb">
        <div class="main-content-schoola">
          <h1>简介</h1>
          <P>华迪家校通（Hwadee Families School
            Communication，简写：Hwadee-FSC）是指利用无线通信技术和网络技术搭建的家校互通平台，为家校之间提供充分、准确、及时的沟通方式，为全面监控学生和学生成长提供有效的途径，该平台运行于移动终端，家长、学生、教师、领导都可以通过智能手机、平板电脑等媒介进行沟通和信息传递。</P>
        </div>
      </div>

      <div class="main-content-school2">
        <h1>选择我们</h1>
        <P>为什么要选择我们呢？让我们来看看选择我们的理由！</P>
        <el-button class='button-choose' @click="buttonClick">{{ buttonText }}</el-button>
        <div class="main-content-school2-slice">
          <div class="main-content-school2-slice1">

            <transition
                v-for="(item, index) in items1"
                :key="index"
                :name="item.transitionName"
            >
              <div class="main-content-school2-slicein" v-if="show">
                <img :src="item.imgUrl" alt="">
                <h2>{{ item.title }}</h2>
              </div>
            </transition>
            <transition
                v-for="(item, index) in items2"
                :key="index"
                :name="item.transitionName"
            >
              <div class="main-content-school2-slicein" v-if="show1">
                <img :src="item.imgUrl" alt="">
                <h2>{{ item.title }}</h2>
              </div>
            </transition>


          </div>
        </div>
      </div>
      <div class="main-content-school3">
        <h1>我们可以提供</h1>
        <P>在中国大学MOOC的合作帮助下，我们的产品可以完全替代mooc等教学软件</P>
        <div class="main-content-school3-content">

          <div class="boxes">

          </div>


        </div>
      </div>
      <div class="main-content-school4">
        <h1>产品用户</h1>
        <P>谁可以使用我们的家校通产品呢？一共有四种身份</P>
        <div class="main-content-school4-content">
          <div class="main-content-school4-content1">
            <div class="content-p">
              <svg style="margin-top: 10px " t="1720181587016" class="icon1" viewBox="0 0 1263 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="4623" width="200" height="200">
                <path
                    d="M528.299836 658.129008l0.981918 21.464723-12.683573 20.979375 38.897973 169.908252-54.953732 26.705359-54.953732-26.705359 38.892362-169.908252-12.683573-20.979375 0.976307-21.464723C496.985074 656.7936 504.085742 656.7936 528.299836 658.129008L528.299836 658.129008zM489.847934 67.581195l538.478115 0c16.810433 0 32.111518 6.873425 43.198773 17.960679 11.087255 11.045173 17.963485 26.346258 17.963485 43.198773l0 336.275989c0 16.768351-6.87623 32.06663-17.963485 43.159496l-0.047693 0.039277 0 0.047693c-11.134948 11.047978-26.38834 17.924208-43.153885 17.924208l-238.044932 0-84.223299 66.170038-30.024241 23.594082 5.76526-37.700033 7.005282-46.035112 29.895189 4.480351-1.240022 8.295803 138.06606-108.485085 18.715353 23.72594-45.415101 35.705337 199.486422 0c8.517436 0 16.232504-3.456351 21.821019-9.047671l0.047693-0.047693c5.549238-5.543627 9.008395-13.306389 9.008395-21.821019L1059.186323 128.743452c0-8.472548-3.459156-16.232504-9.056088-21.821019-5.633403-5.588515-13.351277-9.092559-21.821019-9.092559L489.847934 97.829874c-8.51463 0-16.277392 3.459156-21.865907 9.047671-5.588515 5.633403-9.047671 13.348471-9.047671 21.865907l0 21.997764-30.248679 0L428.685677 128.743452c0-16.810433 6.873425-32.06663 17.918597-43.153885l0.089775-0.044888C457.781304 74.457425 473.037501 67.581195 489.847934 67.581195L489.847934 67.581195zM676.039189 374.587616c10.374663-138.110948-9.092559-217.635068-174.660734-195.457753-56.190948 7.496241-117.221348-9.002784-152.037348 16.499025-43.776701 41.293852-46.879562 103.252866-34.995551 175.945644-2.623123 1.419573-5.277107 3.013085-7.891814 4.833841l-7.802038 5.277107-0.137468 9.359079c-0.401184 24.216899 2.623123 44.663233 9.140252 60.317808 5.9392 14.235003 14.678268 24.839715 26.385534 31.224986 13.9264 47.45749 33.935079 83.070247 58.95154 108.706718 27.274871 27.945381 60.096175 43.818784 97.212668 50.077808l3.33291 0.530236 3.327299-0.667704c41.114301-8.691375 73.935605-25.27737 100.107923-52.953425 24.256175-25.639277 42.357129-60.26731 55.663518-106.490389 11.266805-6.564822 19.694466-17.253699 25.414838-31.359649 6.253414-15.567605 9.134641-35.657644 8.736263-59.386389l-0.134663-9.359079-7.804844-5.277107C677.899222 375.740668 676.970608 375.165545 676.039189 374.587616L676.039189 374.587616zM273.629633 641.2288l-7.361578-0.044888-5.639014 4.878729c-39.652647 34.594367-62.890433 85.02286-76.412844 136.475353-13.037063 49.892647-16.94229 100.854181-17.702575 138.422356l-0.401184 19.918904 19.871211 0L802.17074 940.879255l17.475332 0 1.904921-17.475332c4.878729-45.238356-2.83634-102.545885-19.697271-155.058849-16.055759-50.161973-40.749589-96.730126-71.045962-125.343211l-5.942005-5.633403-8.026477 0.263715-94.603573 3.237523 0 38.984942 87.463627-2.976614c22.749633 24.306674 41.86617 62.130148 55.082784 103.390334 13.13806 40.889863 20.179814 84.621677 19.161425 121.519342-476.693041 0-90.072723 0-577.816548 0 1.593512-32.285458 5.807342-71.315288 15.834126-109.467003 11.087255-42.354323 29.314455-83.47143 59.03851-112.067682l79.299682 0.706981 0-38.94286L273.629633 641.2288zM873.662773 322.251397 873.662773 345.270356 999.760658 345.270356 999.760658 322.251397ZM740.570827 322.251397 740.570827 345.270356 853.66251 345.270356 853.66251 322.251397ZM936.199715 244.323595 936.199715 267.342553 999.760658 267.342553 999.760658 244.323595ZM885.156822 244.323595 885.156822 267.342553 910.700712 267.342553 910.700712 244.323595ZM811.086553 244.323595 811.086553 267.342553 862.179945 267.342553 862.179945 244.323595ZM740.570827 244.323595 740.570827 267.342553 791.574444 267.342553 791.574444 244.323595ZM740.570827 172.250827 740.570827 195.269786 999.763463 195.269786 999.763463 172.250827ZM335.100493 408.071014c0.799562 11.752153 2.794258 21.644274 6.034586 29.364953 3.234718 7.846926 7.670181 12.905205 13.303584 14.633381l9.577907 2.973808 2.620318 9.667682c12.332888 45.459989 30.069129 78.545008 52.296942 101.34514 20.712855 21.209425 45.63954 33.61806 73.935605 38.984942 32.1536-7.313885 57.700296-20.443529 77.835222-41.686619 21.332866-22.530805 37.253962-54.687211 49.146389-99.041841l2.48846-9.224416 9.047671-3.195441c5.501545-1.907726 9.847233-7.095058 13.039868-14.944789 3.060778-7.670181 5.007781-17.340668 5.804537-28.787025-5.279912 0.047693-10.643989 0.179551-16.765545 0.931419l-2.437962-8.203222-5.190137 0.311408-2.979419-15.747156c-2.30891-12.285195-5.857841-23.681052-10.461633-34.151101-13.842236 5.855036-29.364953-4.923616-43.375518-12.994981l-7.095058 22.264285-11.446356-1.506542 1.509348-13.57291-12.063562 19.383058-10.733764-2.129359 10.559825-28.739332 0 0c-59.122674 52.465271-128.269326 49.09589-166.811003 19.781436-1.240022 2.971003-2.395879 6.031781-3.45074 9.134641-2.6624 10.646795-5.639014 24.483419-8.295803 35.040438l-0.715397 3.857534-0.266521-0.044888c-0.575123 2.129359-1.108164 3.989392-1.641205 5.633403C353.731682 404.213479 343.884449 406.738411 335.100493 408.071014L335.100493 408.071014z"
                    fill="currentColor" p-id="4624"></path>
              </svg>
              <div>
                <h2>教师</h2>
                <p> 向家长和学生发送课后作业信息。
                  沟通：通过平台与家长和学生沟通，包括语音支持。
                </p>
              </div>
            </div>
            <div class="content-p">

              <svg t="1720181864930" class="icon2" viewBox="0 0 1263 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5675" width="200" height="200">
                <path
                    d="M109.893436 620.981655c61.181896-26.963463 122.302071-53.935342 183.430663-80.901611 15.278641-12.927649 30.503978-25.855299 45.72651-38.780142l95.156252 216.465184 84.571178-216.465184c15.685436 13.25589 31.426981 26.441644 47.112416 39.694729l125.545205 53.870816c1.568263-5.117195 3.299244-9.648044 5.091945-13.455079 45.502071-19.099704 86.246049-39.689118 113.276844-46.649512 27.608723 71.522893 69.632 123.746893 120.6272 164.098104 55.733655-43.305381 96.253195-98.685545 124.560482-163.708142 29.000241 5.773677 66.271036 18.302948 96.777819 25.914214 26.276121 54.263584 26.966268 183.924427 25.527058 263.440132L788.387419 824.505162c0.987529 35.632395 0.642455 72.504811 0 109.708274-235.926795 0-471.797479 0-707.668164 0C75.916274 783.710685 84.714258 676.420734 109.893436 620.981655L109.893436 620.981655zM827.105841 328.751693c54.765764 7.409271 160.226542-3.355353 204.157545-22.746827 1.736592 28.882411 2.19669 84.972362-15.691047 127.918641-8.388384 20.317282-20.8896 36.406707-33.800416 48.854619l103.314586 2.429545c0 0-10.355025-83.521929-7.229721-105.171814 42.373962-296.474652-340.753534-296.474652-298.379573 0 3.069195 21.647079-7.235332 105.171814-7.235332 105.171814l104.074871-2.48846c-12.910816-12.388997-25.414838-28.478422-33.806027-48.795704-13.951649-33.514258-16.723463-74.9568-16.437304-105.286838L827.105841 328.751693 827.105841 328.751693zM297.431321 369.964186c-5.669874-57.708712-6.890258-98.517216 10.708515-156.223123 66.562805-40.634564 147.944153 25.005238 245.998466 2.373436 9.608767 47.984921 12.964121 88.905644 10.068866 156.573808 0 0 38.14891-32.821304 43.470904-60.895737 5.38091-28.071627-4.687956-152.923879-18.117786-172.893282-53.943759-80.110466-252.827003-82.655036-311.983342-13.659879-15.971595 18.695715-34.322236 189.274477-16.959123 211.965195C278.039847 359.948625 297.431321 369.964186 297.431321 369.964186z"
                    fill="currentColor" p-id="5676"></path>
              </svg>
              <div>
                <h2>家长</h2>
                <p>访问学校简介、组织设置、通知、公告和新闻。接收更新：获取有关学生出勤、评论、成绩和家庭作业的推送通知。</p>
              </div>
            </div>
            <div class="content-p">
              <div>
                <svg t="1720182101939" class="icon3" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="10172" width="200" height="200">
                  <path
                      d="M757.248 746.325333c-124.074667-24.405333-124.074667-51.2-124.074667-70.485333v-25.941333a257.877333 257.877333 0 0 0 73.898667-115.541334c41.301333-13.653333 55.808-68.266667 55.808-94.72a40.277333 40.277333 0 0 1 0-4.266666 92.330667 92.330667 0 0 0-17.066667-68.266667 54.442667 54.442667 0 0 0-17.066666-12.288v-136.533333l170.666666-36.522667a25.6 25.6 0 0 0-1.706666-51.2l-382.293334-54.613333h-7.168L126.122667 131.584a25.6 25.6 0 0 0-1.706667 51.2l6.997333 1.536v300.373333a25.6 25.6 0 0 0 51.2 0v-290.133333l112.64 24.064v136.533333c-19.456 8.874667-40.96 31.573333-40.96 88.234667 0 32.256 13.994667 77.994667 51.2 90.624A243.712 243.712 0 0 0 377.173333 648.533333v31.402667c0 17.066667 0 42.666667-121.173333 66.048C121.856 771.925333 80.213333 870.4 76.8 919.893333a26.282667 26.282667 0 0 0 6.826667 18.773334 25.429333 25.429333 0 0 0 18.773333 8.533333h819.2a25.6 25.6 0 0 0 25.6-25.6c0-5.632-2.218667-138.922667-189.952-175.274667zM287.744 791.893333a457.386667 457.386667 0 0 0 62.805333-17.066666L512 890.197333l160.085333-113.152a549.376 549.376 0 0 0 64.341334 17.066667l-144.042667 102.4h-159.914667z m218.965333-527.872a27.648 27.648 0 0 0 10.581334 0l160.256-34.133333v41.472L512 294.912l-165.546667-23.552v-41.642667z m-155.306666 242.858667a25.6 25.6 0 0 0-25.088-20.48C307.2 486.4 305.493333 443.733333 305.493333 443.733333c0-10.069333 1.024-42.666667 15.36-42.666666a25.6 25.6 0 0 0 25.6-25.6v-52.394667l161.962667 23.210667h7.168l161.962667-23.210667V375.466667a25.6 25.6 0 0 0 24.746666 25.6 8.704 8.704 0 0 1 5.632 1.536c4.949333 5.290667 4.266667 24.405333 3.925334 30.549333v6.485333c0 9.557333-7.68 46.762667-24.917334 46.762667a25.6 25.6 0 0 0-24.917333 19.626667A208.213333 208.213333 0 0 1 574.293333 631.466667a26.112 26.112 0 0 0-7.168 7.168l-122.538666-1.706667a27.306667 27.306667 0 0 0-6.485334-5.973333 170.666667 170.666667 0 0 1-15.701333-10.752 24.746667 24.746667 0 0 0-6.826667-5.802667 192.682667 192.682667 0 0 1-64.170666-107.52z"
                      fill="currentColor" p-id="10173"></path>
                </svg>
                <h2></h2>

              </div>
              <div>
                <h2>学生</h2>
                <p>接收和查看教师发送的家庭作业信息。沟通：通过平台与老师沟通。</p>
              </div>
            </div>
            <div class="content-p">
              <svg t="1720181971539" class="icon4" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="7922" width="200" height="200">
                <path
                    d="M442.8 746.8L511.4 923l67.9-174.2L543 625.5c3.3-3 5.4-7.2 5.4-12v-28.3c0-9-7.4-16.4-16.4-16.4h-42.8c-9 0-16.4 7.4-16.4 16.4v28.3c0 5.5 2.9 10.1 7.1 13.1l-37.1 120.2z"
                    fill="#F79633" p-id="7923"></path>
                <path
                    d="M688.6 566.6l-177.3 454.6-177-454.7C155 636.8 66.8 810.7 30.8 1024h961.1c-36.1-213.2-124.1-387-303.3-457.4zM513.3 0C368.8 0.1 251.7 117.2 251.7 261.6c0 144.5 117.2 261.6 261.7 261.6S775 406.1 775 261.6C774.9 117.2 657.8 0.1 513.3 0z m0 478.5c-115.7-0.2-209.8-90.7-216.2-204.7 49.6-43.5 84.5-100.6 96.5-165 60.5 67.7 152.9 111 256.5 111 25.5 0 50.2-2.8 74.1-7.8 3.7 16 5.9 32.5 6 49.6-0.3 119.7-97.2 216.7-216.9 216.9z"
                    fill="currentColor" p-id="7924"></path>
              </svg>
              <div>
                <h2>管理员</h2>
                <p>监督新闻、通知和公告的发布。确保将现有学校数据顺利集成到平台中。将出勤、奖惩、评论、成绩发送给家长。</p>
              </div>
            </div>


          </div>

        </div>

      </div>

    </div>
  </Layout>
</template>

<style>

</style>
<script>
import Layout from "../components/commen/layout.vue"

export default {
  name: 'index',
  components: {Layout},
  data() {
    return {
      id: 0,

      animatedIndices: [],
      tabList: [
        {name: 'School', desc: 'School Profile', icon: 'am-icon-cog'},
        {name: 'Company', desc: 'Company Profile', icon: 'am-icon-lightbulb-o'},
        {name: 'Notice', desc: 'The notice about us', icon: 'am-icon-line-chart'},
        {name: 'About', desc: 'All about us', icon: 'am-icon-hourglass-end'},
      ],
      tabIndex: 0,
      show: false,
      show1: false,

      buttonText: 'Click to learn more...',
      buttonText1: 'Click to learn more...',
      buttonText2: 'Get Back',
      buttonIf: true,
      items1: [
        {imgUrl: 'src/assets/images/5.jpg', title: '互联', transitionName: 'el-zoom-in-top'},
        {imgUrl: 'src/assets/images/6.jpg', title: '运动', transitionName: 'el-zoom-in-center'},
        {imgUrl: 'src/assets/images/7.jpg', title: '应用', transitionName: 'el-zoom-in-center'},
        {imgUrl: 'src/assets/images/8.jpg', title: '通话', transitionName: 'el-zoom-in-bottom'}
      ],
      items2: [
        {imgUrl: 'src/assets/images/1.jpg', title: '随时', transitionName: 'el-zoom-in-center'},
        {imgUrl: 'src/assets/images/2.jpg', title: '随地', transitionName: 'el-zoom-in-center'},
        {imgUrl: 'src/assets/images/3.jpg', title: '随心', transitionName: 'el-zoom-in-center'},
        {imgUrl: 'src/assets/images/4.jpg', title: '随变', transitionName: 'el-zoom-in-center'}
      ]


    }

  },
  mounted() {

    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {

    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
    },
    handleScroll() {
      const scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollPosition > 1200) {
        if (this.show) {
          this.show = !this.show
        }
        if (this.show1) {
          this.show1 = !this.show1
        }
        if (!this.show && !this.show1) {
          this.show = !this.show
        }
      }


    },
    buttonClick() {
      this.show = !this.show;
      this.show1 = !this.show1;
      if (this.buttonIf) {
        this.buttonText = this.buttonText2;
        this.buttonIf = !this.buttonIf
      } else {
        this.buttonText = this.buttonText1;
        this.buttonIf = !this.buttonIf
      }
    },

  }
}
</script>
